<template>
  <div>
    <div v-if="dateType === 'year'" class="yearrange_wrap">
      <el-date-picker ref="yearStart" v-model="yearStart" :type="dateType" :picker-options="startDatePicker" placeholder="开始时间" :value-format="valueFormat" />
      <span style="margin:0 10px">至</span>
      <el-date-picker ref="yearEnd" v-model="yearEnd" class="end_year_picker" :type="dateType" :value-format="valueFormat" :picker-options="endDatePicker" placeholder="结束时间" />
    </div>
    <el-date-picker v-else ref="datePicker" v-model="dateValue" style="width:400px" align="right" :key="dateType" :type="dateType" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :value-format="valueFormat" :default-time="['00:00:00', '23:59:59']" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      yearStart: '',
      yearEnd: '',
      dateValue: '',
      dateType: 'datetimerange',
      valueFormat: 'yyyy-MM-dd HH:mm:ss',
      pickerOptions: {
        shortcuts: [{
          text: '年',
          onClick: picker => {
            this.valueFormat = 'yyyy'
            this.changeType('year')
          }
        }, {
          text: '月',
          onClick: picker => {
            this.valueFormat = 'yyyy-MM'
            this.changeType('monthrange')
          }
        }, {
          text: '日期时间',
          onClick: picker => {
            this.valueFormat = 'yyyy-MM-dd HH:mm:ss'
            this.changeType('datetimerange')
          }
        }]
      },
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate()
    }
  },
  methods: {
    reset() {
      this.yearStart = ''
      this.yearEnd = ''
      this.dateValue = ''
      this.dateType = 'datetimerange'
      this.valueFormat = 'yyyy-MM-dd HH:mm:ss'
    },
    getVal() {
      if (this.dateType === 'year') {
        if (!this.yearStart && !this.yearEnd) {
          return ''
        }
        if (!this.yearStart) {
          this.$message({
            message: '请选择起始年份',
            type: 'warning'
          })
          return 'error'
        }
        if (!this.yearEnd) {
          this.$message({
            message: '请选择结束年份',
            type: 'warning'
          })
          return 'error'
        }
        return this.yearStart + '~' + this.yearEnd
      } else {
        return this.dateValue ? this.dateValue[0] + '~' + this.dateValue[1] : ''
      }
    },
    beginDate() {
      const self = this
      return {
        shortcuts: [{
          text: '年',
          onClick: picker => {
            this.valueFormat = 'yyyy'
            this.changeType('year')
          }
        }, {
          text: '月',
          onClick: picker => {
            this.valueFormat = 'yyyy-MM'
            this.changeType('monthrange')
          }
        }, {
          text: '日期时间',
          onClick: picker => {
            this.valueFormat = 'yyyy-MM-dd HH:mm:ss'
            this.changeType('datetimerange')
          }
        }],
        disabledDate(time) {
          if (self.yearEnd) {
            return self.yearEnd < time.getFullYear()
          } else {
            // return time.getFullYear() > new Date().getFullYear()
          }
        }
      }
    },
    processDate() {
      const self = this
      return {
        shortcuts: [{
          text: '年',
          onClick: picker => {
            this.valueFormat = 'yyyy'
            this.changeType('year')
          }
        }, {
          text: '月',
          onClick: picker => {
            this.valueFormat = 'yyyy-MM'
            this.changeType('monthrange')
          }
        }, {
          text: '日期时间',
          onClick: picker => {
            this.valueFormat = 'yyyy-MM-dd HH:mm:ss'
            this.changeType('datetimerange')
          }
        }],
        disabledDate(time) {
          if (self.yearStart) {
            return self.yearStart > time.getFullYear()
          } else {
            // return time.getFullYear() > new Date().getFullYear()
          }
        }
      }
    },
    changeType(type) {
      this.dateType = type
      this.dateValue = ''
      this.yearStart = ''
      this.yearEnd = ''
      if (type !== 'year') {
        this.$nextTick(() => {
          this.$refs.datePicker.focus()
        })
      } else {
        this.$nextTick(() => {
          this.$refs.yearStart.focus()
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.yearrange_wrap {
  margin-top: 3px;
  line-height: 33px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;

  .el-date-editor--year {
    width: 120px;
  }

  /deep/.el-input__inner {
    height: 33px;
    border: none;
  }

  /deep/.el-input__icon {
    line-height: 35px;
  }

  .end_year_picker {
    /deep/.el-input__prefix {
      display: none;
    }
  }
}
</style>
